<script setup>
import { ref } from 'vue'
const rightClickItem = ref(null)
const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    }
})
const emits = defineEmits(['itemClick'])
const handleClick = () => {
    emits('itemClick', rightClickItem.value)
}
</script> 
<template>
    <div class="right-click-item" @click="handleClick" ref="rightClickItem" :disabled="disabled" >
        <slot>

        </slot>
    </div>
</template> 
<style scoped>
.right-click-item {
    text-align: inherit;
    font-size: 10px;
    padding: 3px 10px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

.right-click-item:hover {
    background-color: #e0e0e0;
}

.right-click-item:active {
    background-color: #ccc;
}

.right-click-item[disabled=true] {
    background-color: #f0f0f0;
    cursor: not-allowed;

}
</style>